#app {
    --op-primary-color: rgb(31, 175, 243);
    --op-gray-bg-color: rgb(244, 244, 244);
    --op-page-padding: 10px;
}

.op {
    &-thin-border {
        color: rgb(247, 68, 68);
        position: relative;
        border: none;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid rgb(247, 68, 68);
            border-radius: 20px;
            box-sizing: border-box;
            width: 500%;
            height: 500%;
            transform: scale(0.2); // 缩放基数为1，大于1为放大，小于1为缩小
            transform-origin: left top; // 改变元素基点
        }
    }

    &-ellipsis {
        white-space: nowrap;
        /* 规定文本是否折行 */
        overflow: hidden;
        /* 规定超出内容宽度的元素隐藏 */
        text-overflow: ellipsis;
        /* 规定超出的内容文本省略号显示，通常跟上面的属性连用，因为没有上面的属性不会触发超出规定的内容 */
    }

    &-lazyload {
        background-color: rgb(173, 171, 171);
    }

    &-fullscreen {
        background: var(--op-gray-bg-color);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
}